<template>
  <body>
  <div class="container">
    <div class="notice"><span>Loading</span></div>
    <img src="../assets/loading/cloud.png" alt="" class='cloud'>
    <div class="ocean">
      <div class="boat">
        <img src="../assets/monkeys/loading.gif" alt="" class="monkey">
      </div>
    </div>
  </div>
  </body>
</template>

<script>
export default {
  created() {
    this.backMusic = "../static/loading.mp3"
    this.backOgg = new Audio(this.backMusic)
    this.Jump()
    this.$data.destination=this.$route.query.destination
    console.log(this.$data.destination)
  },
  name: "GameLoading",
  data(){
    return{
      backMusic: null,
      backOgg: null,
      musicStop: 0,
      count:"",//倒计时
      destination:'',//目标路由
    }
  },
  methods:{
    //几秒后进入跳转页面
    Jump(){
      this.backOgg.play()
      const time_jump = 2;
      if(!this.timer){
        this.count = time_jump ;
        this.show = false;
        this.timer = setInterval(()=>{
          if(this.count > 0 && this.count <= time_jump ){
            this.count--;
          }else{
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            //跳转的页面写在此处
            const des = "/"+this.$data.destination
            this.backOgg.pause()
            this.$router.push({
              path:des,
              query:{
                monkeys:this.$route.query.monkeys,
                quitN:this.$route.query.quitN,
              }
            });
          }
        },1000)
      }

    },

  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.container{
  width: 100%;
  min-height: 100vh;
  position: relative;
  /*background-image: url('../assets/loading/background.jpg');*/
  background-color: #00CCFF;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.container .notice{
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.notice span{
  font-family:  "Lucida Console", "Courier New", monospace;
  text-shadow: 2px 2px 5px blue;
  color: #ecfd00;
  font-size: 30px;
}
.container .ocean{
  height: 220px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.container .ocean .boat{
  width: 150px;
  position: absolute;
  bottom: 250px;
  left: 0;
  animation: boat-move 3s linear ;
}
/*.container .ocean .boat:hover{*/
/*  left: 1280px;*/
/*}*/
@keyframes boat-move{
  0%{
    transform: rotate(0deg) translateX(0px);
  }
  25%{
    transform: rotate(0deg) translateX(320px);
  }
  50%{
    transform: rotate(0deg) translateX(640px);
  }
  75%{
    transform: rotate(0deg) translateX(960px);
  }
  100%{
    transform: rotate(0deg) translateX(1380px);
  }
}
.container .ocean .boat img{
  width: 100%;
}
.container .cloud{
  height: 250px;
  position: absolute;
  right: 0;
  animation: cloud-move 10s linear infinite;
}
@keyframes cloud-move{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(500px);
  }
}
</style>
